<template>
  <div class="Bread">
  <Bread></Bread>
  </div>
  <div class="addgoods">
    <!-- 填写商品信息 -->
    <div>
      <el-form :model="form" label-width="130px">
        <el-form-item label="品牌名称:" :rules="rules">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="品牌首字母:" :rules="rules">
          <el-input v-model="form.firstLetter" />
        </el-form-item>
        <el-form-item label="品牌LOGO:" :rules="rules">
          <el-upload
            v-model:file-list="logoList"
            class="upload-demo"
            :action="action"
            :on-success="handlelogourl"
            list-type="picture"
          >
            <el-button type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">只能上传jpg/png文件，且不超过100kb</div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="品牌专区大图:">
          <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            :action="action"
            :on-success="handlelBigpic"
            list-type="picture"
          >
            <el-button type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">只能上传jpg/png文件，且不超过100kb</div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item label="品牌故事:">
          <el-input v-model="form.brandStory" />
        </el-form-item>
        <el-form-item label="排序:">
          <el-input v-model="form.sort" type="number" />
        </el-form-item>
        <el-form-item label="是否显示:">
          <el-radio-group v-model="form.showStatus">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="品牌制造:">
          <el-radio-group v-model="form.factoryStatus">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button @click="submitForm"> 提交 </el-button>
          <el-button @click="claerForm"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import * as api from "@/request/api";
import { ElMessage, ElMessageBox } from "element-plus";
import type { UploadProps, UploadUserFile } from "element-plus";
import Bread from "@/components/Bread.vue";
//上传log

let action = ref("http://120.24.64.5:8088/mall-admin/minio/upload");
const logoList = ref<UploadUserFile[]>([]);
const fileList = ref<UploadUserFile[]>([]);
const logourl = ref("");
const bigPic = ref("");
//上传logo
const handlelogourl: UploadProps["onSuccess"] = (file) => {
  // console.log(file.data.url);
  logourl.value = file.data.url;
};
// console.log(logourl);

//上传大图
const handlelBigpic: UploadProps["onSuccess"] = (file) => {
  // console.log(file.data.url);
  bigPic.value = file.data.url;
};
// console.log(bigPic);
//表单数据
const form = reactive({
  brandStory: "",
  factoryStatus: 0,
  firstLetter: "",
  name: "",
  showStatus: 0,
  sort: 0,
});
//表单效验规则
let rules = [
  {
    required: true,
    message: "Please input email address",
    trigger: "blur",
  },
];
//添加品牌
let submitForm = async () => {
  ElMessageBox.confirm("是否确认提交!", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      // 发请求
      await api.goods.addCreate({
        bigPic: bigPic.value,
        brandStory: form.brandStory,
        factoryStatus: form.factoryStatus,
        firstLetter: form.firstLetter,
        logo: logourl.value,
        name: form.name,
        showStatus: form.showStatus,
        sort: form.sort,
      });
      (form.name = ""),
        (bigPic.value = ""),
        (form.brandStory = ""),
        (form.factoryStatus = 0),
        (form.firstLetter = ""),
        (form.showStatus = 0),
        (form.sort = 0),
        (logoList.value = []),
        (fileList.value = []),
        (logourl.value = ""),
        ElMessage({
          message: "操作成功",
          grouping: true,
          type: "success",
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "操作失败",
      });
    });
};
//重置表单
let claerForm = () => {
  ElMessageBox.confirm("是否确认重置!", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      (form.name = ""),
        (bigPic.value = ""),
        (form.brandStory = ""),
        (form.factoryStatus = 0),
        (form.firstLetter = ""),
        (form.showStatus = 0),
        (form.sort = 0),
        (logoList.value = []),
        (fileList.value = []),
        (logourl.value = ""),
        ElMessage({
          message: "操作成功",
          grouping: true,
          type: "success",
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "操作失败",
      });
    });
};
</script>

<style lang="scss" scoped>
.addgoods {
  width: 800px;
  height: 835px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  margin: 0 auto;
  margin-top: 30px;
  padding: 35px;
  box-sizing: border-box;
}
.el-form-item__content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 300px;
  .text {
    width: 400px;
  }
}
.Bread {
  position: sticky;
  top: -100px;
  margin: 0;
  width: 100%;
  border-bottom: 1px solid #eee;
  // box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  padding-left: 20px;
  box-sizing: border-box;
}
</style>
